<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中草药图像识别系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        /* 新增左右布局样式 */
        .main-container {
            display: flex;
            gap: 20px;
            width: 95%;
            max-width: 1200px;
            margin: 30px auto;
        }
        
        .left-panel {
            flex: 1;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .right-panel {
            flex: 1;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        /* 调整原有样式适应新布局 */
        .tab-container {
            display: flex;
            margin-bottom: 20px;
            flex-direction: column;
        }
        
        .tab {
            padding: 12px 20px;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 5px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }
        }
        
        /* 新增置信度进度条样式 */
        .confidence-display {
            margin-top: 15px;
        }
        
        .confidence-bar-container {
            position: relative;
            width: 100%;
            height: 25px;
            background: #f0f0f0;
            border-radius: 12px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .confidence-bar {
            height: 100%;
            background: linear-gradient(90deg, #2ecc71, #27ae60);
            border-radius: 12px;
            transition: width 0.5s ease;
        }
        
        .confidence-value {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #333;
            font-weight: bold;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 左侧功能选择区 -->
        <div class="left-panel">
            <div class="header">
                <h1>中草药图像识别系统</h1>
                <p>上传中草药图片，系统将自动识别并分析</p>
            </div>

            <div class="tab-container">
                <div class="tab active" onclick="switchTab('single')">单张识别</div>
                <div class="tab" onclick="switchTab('batch')">批量识别</div>
                <div class="tab" onclick="switchTab('camera')">摄像头识别</div>
            </div>

            <!-- 单张识别 -->
            <div id="singleTab" class="tab-content active">
                <form method="POST" enctype="multipart/form-data">
                    <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; align-items: center;">
                        <div>
                            <input type="file" name="file" accept=".jpg,.jpeg,.png" id="fileInput" style="display: none;" onchange="previewImage(this)">
                            <label for="fileInput" style="padding: 10px 25px; background: #2ecc71; color: white; border-radius: 5px; cursor: pointer; font-size: 14px; display: inline-block;">
                                选择图片
                            </label>
                        </div>
                        <div>
                            <button type="submit" style="padding: 10px 25px; background: #2ecc71; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; height: 40px;">
                                识别图片
                            </button>
                        </div>
                    </div>
                    
                    <!-- 将识别结果图片放在这里 -->
                    {% if image_url %}
                    <div class="image-preview-container" style="text-align: center; margin-top: 20px;">
                        <h4>原始图片</h4>  <!-- 修改标签名 -->
                        <img src="{{ image_url }}" alt="原始图片" style="max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #eee;">
                    </div>
                    {% endif %}
                </form>
            </div>

            <!-- 批量识别 -->
            <div id="batchTab" class="tab-content">
                <form method="post" enctype="multipart/form-data" action="/">
                    <!-- 表单内容保持不变 -->
                </form>
            </div>

            <!-- 摄像头识别 -->
            <div id="cameraTab" class="tab-content">
                <div class="upload-area">
                    <a href="/camera" class="btn">开启摄像头识别</a>
                    <p style="margin-top: 10px;">点击按钮打开摄像头进行实时识别</p>
                </div>
            </div>
        </div>

        <!-- 右侧结果展示区 -->
        <div class="right-panel" id="resultPanel">
            {% if heatmap_url %}
            <div class="result-section" style="text-align: center;">
                <h3 style="text-align: center;">分析结果</h3>
                <div class="heatmap-container" style="display: inline-block; text-align: center;">
                    <h4 style="text-align: center;">模型特征可视化</h4>
                    <img src="{{ heatmap_url }}" alt="热力图" style="max-width: 100%; border-radius: 8px; margin: 0 auto;">
                </div>
                <div class="confidence-display" style="text-align: center;">
                    <p>识别类别: {{ predicted_class }}</p>
                    <div class="confidence-bar-container" style="margin: 0 auto; max-width: 80%;">
                        <div class="confidence-bar" style="width: {{ confidence }}%;"></div>
                        <div class="confidence-value">{{ confidence }}%</div>
                        <!-- 添加置信度标签 -->
                        <div style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #333; font-weight: bold; font-size: 14px;">
                            置信度:
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="empty-state" style="text-align: center;">
                <p>请上传图片进行识别</p>
            </div>
            {% endif %}
        </div>
    </div>

    <script>
        // 文件选择和预览
        const fileInput = document.getElementById('fileInput');
        const previewImage = document.getElementById('previewImage');
        const imagePreview = document.getElementById('imagePreview');
    
        fileInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    imagePreview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            }
        });

        // 切换标签页
        function switchTab(tabName) {
            // 更新标签样式
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 更新内容区域
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(tabName + 'Tab').classList.add('active');
        }
    </script>
</body>
</html>

<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        const previewDiv = document.getElementById('imagePreview');
        const previewImg = document.getElementById('previewImage');
        
        // 显示预览区域
        previewDiv.style.display = 'block';
        
        // 创建文件阅读器
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<!-- 在表单部分添加以下代码 -->
<form method="POST" enctype="multipart/form-data" id="uploadForm">
    <div style="margin-bottom: 20px;">
        <input type="file" id="fileInput" name="file" accept="image/*" style="display: none;">
        <label for="fileInput" style="padding: 10px 15px; background: #4CAF50; color: white; border-radius: 4px; cursor: pointer;display: none;">
            选择图片
        </label>
        <button type="submit" style="padding: 10px 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;display: none;">
            开始识别
        </button>
    </div>
    
    <!-- 图片预览区域 -->
    <div id="previewContainer" style="display: none; margin-top: 20px; text-align: center;">
        <h4>原始图片预览</h4>
        <img id="imagePreview" src="#" alt="预览图片" style="max-width: 100%; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
</form>

<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const preview = document.getElementById('imagePreview');
            preview.src = event.target.result;
            document.getElementById('previewContainer').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});
</script>
